<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我也不知道叫什么 然后看完你就成了才</title>
    <link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__STATIC__/css/header.css" />
    <script src="__STATIC__/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/js/bootstrap.min.js"  type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/js/common.js"  type="text/javascript" charset="utf-8"></script>
    <style>
        .container-bar{
            position: absolute;
            width: 100%;
            z-index: 1;
        }
        .guidance-box{
            width: 100%;
            height: auto;
            background: #FFFFFF;
        }
        .guidance-bar{
            width: 100%;
            height: 44px;
        }
        .guidance-bar-classify {
            padding: 8px 16px 8px 24px;
            height: 100%;
        }
        .guidance-bar-search{
            padding: 8px 16px 8px 24px;
            height: 100%;
        }
        .guidance-btn-bar{
            display: flex;
            flex-direction: row;
        }
        .btn-style{
            width: 88px;
            height: 100%;
            border: solid 0px #333333;

            color: #333333;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .common-btn-style{
            width: 64px;
            background-color: #c02c38;
            color:#FFFFFF;
            border: solid 0px #000000;
            border-radius: 6px;
        }
        /*common.css*/
        .height-100{
            height: 100%;
        }
        .margin-left-24{
            margin-left: 24px;
        }
        .width-256{
            width: 256px;
        }
        .width-100{
            width: 100%;
        }
        .division-line{
            width: 100%;height: 10px;
        }
        img{
            width: 100%;
        }
        .carousel-bar{
            padding: 0px;
            margin:  0px;
        }
        .common-bar{
            padding-left: 2%;
            padding-right: 2%;
        }
        .course-min-bar{
            height: 492px;
            width: 100%;
        }
        .course-msg{
            height: 48%;
            box-shadow: 4px 4px 4px 4px gray;
            border-radius: 12px;
        }
        .course-type{
            width: 20%;
            height: 100%;
            background-color: #333333;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        .course-detail-bar{
            margin: 6px;
            height: 100px;
            width: 150px;
            border: solid 1px #000000;
            border-radius: 8px;
            background-color: #000000;
        }
        .forum-bar{
            margin-left: 10px;
            width: 32%;
            height: 100%;
            border: solid 1px #000000;
            border-radius: 12px;
        }
        .teacher-title{
            width: 240px;
            height: 44px;
            background-color: #FFFFFF;
        }
        .teacher-msg{
            width: 100%;
            height: auto;
        }
        .teacher-detail-msg{
            margin: 1%;
            width: 12%;
            height: 360px;
            background-color: rgba(196,196,196,0.5);
        }
        .teacher-title>span{
            padding: 6px 36px 6px 36px;
            border: solid 1px #333333;
            border-radius: 8px;
            background-color: #333333;
            color: #ffffff;
        }
        .course-detail-imgs{
            width: 100%;
            height: 100%;
        }
        .header-personal-message{
            justify-content: center !important;
        }
        .header-personal-message>span{
            margin-left: 6px;
            margin-right: 6px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-logo-bar">
        <div class="header-logo-msg">
            <!--<div class="logo">

            </div>
            <div class="logo">

            </div>-->
        </div>
        <div class="header-personal-message">
            <span><a href="{:url('index/index/slogin')}">login</a></span>
            <span><a href="{:url('index/index/slogin')}">register</a></span>
        </div>
    </div>
    <div class="nav-bar">
        <ul class="nav">
            <a href="{:url('index/index/home')}">首页</a>
        </ul>
        <ul>
            <a href="#">前端</a>
            <ul class="plat">
                <li><a href="{:url('index/index/course')}">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">Javascript</a></li>
            </ul>
        </ul>
        <ul>
            <a href="#">后端</a>
            <ul class="plat">
                <li><a href="#">Java</a></li>
                <li><a href="#">c++</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">python</a></li>
            </ul>
        </ul>
        <ul>
            <a href="#">移动</a>
            <ul class="plat">
                <li><a href="#">ios</a></li>
                <li><a href="#">Android</a></li>
            </ul>
        </ul>
        <ul>
            <a href="#">数据库</a>
            <ul class="plat">
                <li><a href="#">MySQL</a></li>
                <li><a href="#">SQLServer</a></li>
                <li><a href="#">Oracle</a></li>
            </ul>
        </ul>
    </div>
</div>
<div class="container-bar">
    <div class="division-line"></div>
    <div class="guidance-box">
        <div class="guidance-bar row mt-3">
            <div class="guidance-bar-classify col-md-6"><div class="btn-style margin-left-24">分类</div></div>
            <div class="guidance-bar-search col-md-6 d-flex justify-content-around">
                <div class="guidance-btn-bar">
                    <div class="btn-style"><a href="">公告信息</a></div>
                    <div class="btn-style margin-left-24"><a href="">脱口秀大会</a></div>
                </div>
                <div>
                    <input type="text" id="search" name="search"  placeholder=""  class="height-100 width-256"/>
                    <input type="submit" value="search"  class="common-btn-style height-100" />
                </div>
            </div>
        </div>
        <div class="carousel-bar row col-md-12 ">
            <div id="demo" class="carousel slide width-100" data-ride="carousel">

                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active ">
                        <img src="__STATIC__/imgs/img_fjords_wide.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="__STATIC__/imgs/img_nature_wide.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="__STATIC__/imgs/img_mountains_wide.jpg">
                    </div>
                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="mt-3">
        <div class="common-bar d-flex flex-column mb-3">
            <div class="course-min-bar d-flex  justify-content-around mb-3">
                <div class=" d-flex flex-column justify-content-between width-100">
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type">
                            <img src="__STATIC__/imgs/qianduan.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "前端"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type" id="houduan">
                            <img src="__STATIC__/imgs/houduan.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "后端"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="forum-bar">

                </div>
            </div>
            <div class="course-min-bar d-flex  justify-content-around mb-3">
                <div class=" d-flex flex-column justify-content-between width-100">
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type" id="mobile">
                            <img src="__STATIC__/imgs/yidong.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "移动"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type" id="sql">
                            <img src="__STATIC__/imgs/shujuku.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "数据库"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="forum-bar">

                </div>
            </div>

        </div>
    </div>
    <div class="mt-3">
        <div class="common-bar d-flex flex-column justify-content-around">
            <div class="d-flex justify-content-center">
                <div class="teacher-title d-flex justify-content-center align-items-center">
                    <span>金牌教师</span>
                </div>
            </div>
            <div class="teacher-msg d-flex justify-content-start flex-wrap">
                <div class="teacher-msg d-flex justify-content-start flex-wrap">
                    {volist name="teacher" id="t" }
                    <div class="teacher-detail-msg">
                        <img src="__STATIC__/imgs/{$t.tpicture}" alt="{$t.tname}" class="course-detail-imgs" />
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
